<template>
  <ul>
    <li v-for="item in courses">
      <div class="left">课程《{{ item.courses }}》</div>
      <!-- <div class="center">sss -->
        <el-progress class="center" :percentage= "item.progress" :show-text="false"></el-progress>
      <!-- </div>    -->
      <div class="right">截至日期：{{ item.endTime }}</div>
    </li>
 


  </ul>
  <div class="page">
      <el-pagination
      :total="111"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      layout="total,prev, pager, next"
    />
    </div>
</template>
<script setup>
import{ref} from 'vue'
import { ElProgress } from 'element-plus';

const currentPage=ref(1)
const pageSize=ref(6)
const courses=ref([
  // {
  //   courses:'高等数学',
  //   progress:50,
  //   endTime:'2024/6/23'
  // },
  // {
  //   courses:'高等数学',
  //   progress:40,
  //   endTime:'2024/6/23'
  // },
  {
    courses:'高等数学',
    progress:80,
    endTime:'2024/6/23'
  },
  {
    courses:'高等数学',
    progress:80,
    endTime:'2024/6/23'
  },
  {
    courses:'高等数学',
    progress:80,
    endTime:'2024/6/23'
  },
  {
    courses:'高等数学',
    progress:40,
    endTime:'2024/6/23'
  },
  // {
  //   courses:'高等数学',
  //   progress:80,
  //   endTime:'2024/6/23'
  // },
])
</script>
<style scoped>
ul{
  position: relative;
  width: 100%;
  height: 96%;
  list-style-type: none;
  /* background-color: rgb(87, 160, 224); */
  display: flex;
  flex-direction: column;
}
li{
  border: 1.5px solid rgba(77, 76, 76, 0.404);
  /* width: ; */
  background-color: aliceblue;
  height: 10%;
  margin: 3.5% 2.5% 0 2.5%;
  /* margin-top: 3%;
  margin-left: 2%; */
  display: flex;
}
.left{
  height: 100%;
  /* float: left; */
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 3%;
}
.center{
  width: 120px;
  height: 100%;
  /* background-color: aliceblue; */
  flex:1;
  /* float: left; */
  margin-left: 1%;
  /* margin-top: 4%; */
  /* margin: auto; */
  display: flex;
  flex-direction: row;
  align-items: center;
}
.right{
  height: 100%;
  margin-left: 23%;
  flex:1;
  /* float: right; */
  /* display: inline; */
  font-size: small;
  color: rgb(233,124,22);
  display: flex;
  flex-direction: row;
  align-items: center;
}
.el-progress--line {
  /* margin-bottom: 15px; */
  max-width: 100px;
  /* width: 180px; */
  /* height: 1em; */
/* margin: auto; */
  /* float:right; */
}
.page{
  /* margin: auto; */
  /* height: 32px; */
  width: 100%;
  /* margin-bottom: 10px; */
  /* background-color: rgb(85, 130, 168); */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* bottom: 0; */
  margin-top: auto;
  /* margin-bottom: 44px; */
  /* bottom: 22px; */
  /* top:22px; */
}
:deep(.btn-prev){
  /* background-color: rgb(1, 85, 158); */
  height: 1em;
}
:deep(.number){
  /* background-color: rgb(54, 121, 180); */
  height: 1em;
}
:deep(.btn-next.is-last){
  /* background-color: antiquewhite; */
  height: 1em;
}
:deep(.el-pagination){
  height: 1em;
}
:deep(.more.btn-quickprev.el-icon){
  height: 1em;
}
:deep(.more.btn-quicknext.el-icon){
  height: 1em;
}
</style>